<template>
  <div class="details">
    <div class="orderDetails publicBox">
      <div class="publicBoxTitle pubTitle">
        订单详情
      </div>
      <div class="allOrderBox publicBoxContent">
        <div class="nav">
          <!--          <div class="line_left line"></div>-->
          <div class="cneter">
            <el-steps :active="act" align-center>
              <el-step :title="item" v-for="(item,index) in displList"></el-step>
            </el-steps>
          </div>
          <!--          <div :class="['line',changRight==1 ? 'chang_line' : 'line_right']"></div>-->
        </div>
      </div>
      <template v-if="orderDetails && [0,1,2,3,4,8,11,-1,-2,-4,-5,-6,-3,-7].indexOf(orderDetails.order_status) == -1">

        <div class="publicBoxTitle pubTitle">
          发货物流
        </div>
        <el-tabs type="border-card" @tab-click="disp" >
          <el-tab-pane v-for="(item,index) in Logistics" :key="index"  >
            <span slot="label"><i class="el-icon-date"></i> 包裹{{index + 1}}</span>
            <div class="publicBoxContent logistics" v-if="display">

              <div class="logisticsTitle">
                <span v-if="Logistics[index] && Logistics[index].length!=0">物流公司：<span>{{item.companyName}}</span></span>
                <span v-else>物流公司：<span></span></span>
                <span v-if="Logistics[index] && Logistics[index].length!=0">运单号：<span>{{ item.shipNo}}</span></span>
                <span v-else>运单号：<span></span></span>
              </div>
              <div :class="['logisticsStatus',show===true ? 'dip':'sho']" v-if="activities[index] && activities[index].length!=0">
                <el-timeline :reverse="reverse">
                  <el-timeline-item color="red" v-for="(activity, inde) in activities[index]" :key="inde" :color=" activity && activity.color"
                                    :timestamp="activity.time">
                    <template v-if="inde== (activities[index] && activities[index].length-1)">
                      <strong> {{activity.context}}</strong>
                    </template>
                    <template v-else>
                      {{activity.context}}
                    </template>

                  </el-timeline-item>
                </el-timeline>
              </div>
              <div v-else-if="Logistics[index] && Logistics[index].length!=0">暂无物流信息</div>
              <div v-else>商家备货中</div>
              <template v-if="activities[index] && activities[index].length!=0">
                <div v-if="!show" class="logisticsBtn" @click="overflow">显示全部物流信息</div>
                <div v-else class="logisticsBtn" @click="overflow">收起</div>
              </template>



            </div>
          </el-tab-pane>

        </el-tabs>

      </template>
      <div class="publicBoxTitle pubTitle">
        订单明细
      </div>
      <div class="orderDetailed publicBoxContent" v-if="orderDetails">
        <div class="detailTitle">
                <span>订单编号：{{orderDetails.child_no}}
                  <span class="detailLeft">状态：
                    <span v-if="[1,2,3,4].indexOf(orderDetails.order_status) != -1">待发货</span>
                     <span v-else-if="orderDetails.order_status==5">待收货</span>
                    <span v-else>{{orderDetails.status_name}}</span>
                  </span>
<!--                  <span class="detailLeft">下单账号：5464654654654</span>-->
                </span>
        </div>
        <div class="detailTitle">
          <span>收货地址： {{orderDetails.address.detail}}</span>
        </div>
        <div class="detailTitle">
          <span>报关信息：{{orderDetails.address.name}} {{orderDetails.address.phone}} {{orderDetails.address.id_card_number}}</span>
        </div>
        <div class="detailTitle">
          <span>交易单号：{{orderDetails.order_m.order_no}}
            <!--            <span class="detailLeft">交易流水号：7464654654654</span>-->
          </span>
        </div>
        <div class="info_sp" v-for="(item,index) in orderDetails.goods" :key="index">
          <div class="info_top">
            <table>
              <tr>
                <td class="tableLeft">商品</td>
                <td class="guding">贸易方式</td>
                <td class="guding" v-for="(ite,inde) in item.attr">{{ite[0]}}</td>
                <td class="guding">单价 * 数量</td>
                <td class="guding">状态</td>
                <td class="guding">操作</td>
              </tr>
            </table>
          </div>
          <div class="info_centent">
            <table>
              <tr>
                <td class="tableLeft ">
                  <div class="cnm">
                    <div class="tableLeftImg">
                      <img :src="$getImg(item.image)" alt="">
                    </div>
                    <div class="tableLeftName">
                      <p>{{item.goods_name}}</p>
                    </div>
                  </div>
                </td>
                <td class="guding">{{item.trade_type_name}}</td>
                <td class="guding" v-for="(ite,inde) in item.attr">
                  {{ite[1]}}
                  <span v-show="ite[0]=='数量'">{{item.unit}}</span>
                </td>
                <td class="guding">{{item.goods_price}} * {{item.total_num}}</td>
                <td class="guding">
                  <span v-if="[1,2,3,4].indexOf(orderDetails.order_status) != -1">待发货</span>
                  <span v-else-if="orderDetails.order_status==5 && (item.refund == null || item.is_refund==0) ">待收货</span>
                  <span v-else-if=" (item.refund != null && item.is_refund==1) ">已申请售后</span>
                  <span v-else>{{orderDetails.status_name}}</span>

                </td>
                <td class="guding">
                  <span class="statusBtn cancal" v-if="([5,6].indexOf(orderDetails.order_status) != -1) && (item.refund == null || item.is_refund==0)"
                        @click="$router.push({path: `/index/order/apply?order_goods_id=${item.order_goods_id}`})">申请售后</span>
                  <span class="statusBtn cancal" v-if="(item.refund != null && item.is_refund==1)"
                        @click="$router.push({path: `/index/order/serviceDetails?orderId=${item.refund.order_refund_id}`})">查看详情</span>
                  <span class="statusBtn immediatePayment" v-if="[1,2].indexOf(orderDetails.order_status) != -1"
                        @click="$router.push({path: `/index/order/apply?order_goods_id=${item.order_goods_id}`})" >申请退款</span>
                  <span class="statusBtn immediatePayment" v-if="orderDetails.order_status==0"
                        @click="beforPlay(orderDetails.order_main_id,orderDetails.order_child_id,orderDetails.pay_price,orderDetails.goods[0].trade_type_name)">立即付款</span>
                </td>
              </tr>
              <tr>
                <td :colspan="num">
                  <div class="info_bottom">
                    <div>
                      <span>留言：{{item.buyer_remark}}</span>
                    </div>
                    <div class='bottom_rig'>
                      <span>实付金额 </span>
                      <span class="total">¥{{item.total_pay_price}}</span>
                    </div>
                  </div>
                </td>
              </tr>
            </table>

          </div>
        </div>
        <div class="bottom">
          <div>运费：{{orderDetails.shipping_amount}}</div>
          <div>总金额：{{orderDetails.pay_price}}</div>
        </div>
      </div>
    </div>

    <el-dialog
        title=""
        :close-on-click-modal=false
        :close-on-press-escape=false
        :show-close=false
        :visible.sync="centerDialogVisible"
        width="30%"
        top="30vh"
        center>
      <div class="pay" v-show="isShow=='3'">
        <div @click="payT=0">
          <img src="../../assets/img/wxzf.png"/>
          <span :class="[payT== 0 ? 'wxzf' : '']">微信支付</span>
        </div>
        <div class="feng" v-if="commodityType"></div>
        <div @click="yePlay" v-if="commodityType">
          <img src="../../assets/img/yezf.png"/>
          <span :class="[payT== 1 ? 'yezf' : '']">余额支付</span>
        </div>
<!--        <div @click="payT=0">微信支付</div>-->
<!--        <div @click="payT=1" v-if="commodityType">余额支付</div>-->
      </div>
      <div style="height: 250px">
        <div v-show="isShow=='1'">
          <div class="loadingBox" v-loading="loading"
               element-loading-text="正在支付，请等待......" element-loading-spinner="el-icon-loading">
          </div>
          <p class="tswz">预计等待5-10s</p>
        </div>

        <div class="nowPlay" v-show="isShow=='3'">
          <div class="clonse" @click="clea"></div>
          <template v-if="payT==1 && commodityType">
            <strong style="margin-bottom: 20px">订单金额：<span class="ddje">￥{{currtMoney}}</span></strong>
<!--            <strong style="margin-bottom: 20px">余额支付</strong>-->
            <div>
              当前账户余额(元)：￥{{ shopInformation && shopInformation.balance}}
            </div>
            <div v-if=" parseFloat(currtMoney) > parseFloat(shopInformation.balance)">
              余额不足，请充值
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="nowPlay(10)" v-if=" parseFloat(currtMoney) <= parseFloat(shopInformation.balance)">立即支付</el-button>
          </template>
          <template v-if="payT==0 && payUrl">
            <div class="qrCode">
              <img  :src="payUrl"/>
            </div>
            <div class="plasePay">请扫码支付：<span>￥</span><span>{{currtMoney}}</span></div>
            <!--            <el-button type="success" v-if="isplay" @click="clea">确认支付</el-button>-->
            <!--            <el-button type="success" v-else disabled >确认支付</el-button>-->

          </template>
          <template v-if="payT==0 && wxzf">
            <div>暂不支持</div>
          </template>
        </div>


      </div>

    </el-dialog>
  </div>
</template>

<script>
    import config from '../../config/index'
    var payInterval = null;
    export default {
        name: "orderDetails",
        data() {
            return {
                payT: 0,
                payUrl:'',
                isplay:false,
                currtType:true,
                commodityType:true,
                loading: true,
                isShow: 3,
                shopInformation: {},
                centerDialogVisible: false,
                currtMoney: 0,
                act: 1,
                changRight: '',
                reverse: true,
                show: false,
                activities: [],
                orderId: "",
                orderDetails: null,
                imgUrl: config.imgUrl,
                Logistics: null,
                num: 5,
                displList: [],
                childID: null,
                orderd: 0,
                display:true,
                timeout:null,
                wxzf:false

            };
        },
        created() {
            this.orderId = this.$route.query.orderId;
            this.getUserInfo();
            this.getDetail();

        },
        destroyed(){
            clearTimeout(this.timeout);
        },
        methods: {
            disp(){
                this.show=false;
                this.display=false
                this.timeout=setTimeout(()=>{
                    this.display=true
                },100)
            },
            yePlay(){
                this.payT=1;
                // clearInterval(payInterval);
            },
            clea(){
                this.centerDialogVisible=false;
                clearInterval(payInterval);

            },
            nowPlay(payType=10,tradeType) {
                if(payType==10){
                    this.isShow = 1;
                }
                this.$HttpPost("/index.php?s=/admin/home.order/pay", {
                    order_id: this.orderd,
                    payType: payType,
                    cheild_id: this.childID
                }).then(res => {
                    if(res.data.payment==false){
                        if(tradeType=="保税"){
                            this.payT=0;
                        }else {
                            this.payT=1;
                        }
                        this.wxzf=true;

                    }
                    if (res.code == 0 && payType==10) {
                        this.centerDialogVisible = false;
                        this.$notifySuccess(res.msg.success);
                        this.getDetail();
                        // this.$router.push({path: `/index/order/allOrder`});
                    }
                    if(res.code == 0 && payType==20 && res.data.payment!=false){
                        this.payUrl=res.data.payment;
                        payInterval=setInterval(()=>{
                            this.$HttpGet(`/index.php?s=/admin/home.order/pay_wechat_status&order_id=${this.orderId}`,{

                            }).then(res => {
                                if(res.data && res.data!='未完成支付'){

                                    this.isplay=true;
                                    this.$notifySuccess('支付成功')
                                    this.getDetail();
                                    clearInterval(payInterval);
                                }
                            })
                        },1000)
                    }

                })
            },
            beforPlay(id, child, money,tradeType) {
                this.orderd = id;
                this.currtMoney = money;
                this.centerDialogVisible = true;
                this.childID = [child];
                this.currtType=true;
                if(tradeType=='保税'){
                    this.currtType=false
                }
                this.nowPlay(20,tradeType);
            },
            getUserInfo() {
                this.$HttpGet("/index.php?s=/admin/index/details").then(res => {
                    this.shopInformation = res.data
                })
            },
            getLogistics(sn,childno, code, no) {
                this.$HttpGet("/index.php?s=/admin/order/detail_express", {
                    order_sn: sn,
                    dly_code: code,
                    ship_no: no,
                    child_no:childno
                }).then(res => {

                    if(!res.data.data.data){
                        return false
                    }



                    this.activities.push(res.data.data.data.reverse());

                    if(this.activities.length!=0){
                        for(let i=0;i<this.activities.length;i++){
                            this.activities[i][this.activities[i].length - 1]['color']='#2bce2f';
                        }

                    }




                })
            },
            getDetail() {

                this.$HttpGet("/index.php?s=/admin/order/detail", {
                    order_child_id: this.orderId
                }).then(res => {

                    this.orderDetails = res.data;
                    for(let i=0;i<this.orderDetails.goods.length;i++){
                        if(this.orderDetails.goods[i].trade_type_name=='保税'){
                            this.commodityType=false;
                            break;
                        }
                    }

                    this.Logistics = res.data.ships;
                    //拆分规格
                    for (let i = 0; i < this.orderDetails.goods.length; i++) {
                        var arr = this.orderDetails.goods[i].goods_attr.split("|");
                        var endArr = arr.map((item, index) => {
                            return item.split("_")
                        });
                        endArr.pop();
                        this.num += endArr.length;
                        this.orderDetails.goods[i].attr = endArr;
                    }
                    //物流
                    if (this.Logistics != null && this.Logistics.length != 0) {
                        for (let i = 0; i < this.Logistics.length; i++) {
                            this.getLogistics(this.orderDetails.order_sn,this.orderDetails.child_no, this.Logistics[i].dlyCode, this.Logistics[i].shipNo)
                        }
                    }

                    switch (this.orderDetails.order_status) {
                        case 8:
                            this.displList = ['创建订单', '已取消'];
                            this.act = 2;
                            break;
                        case 1:
                        case 2:
                        case 3:
                        case 11:
                        case 4:
                            if (this.orderDetails.goods[0].trade_type_name == '保税') {
                                this.displList = ['创建订单', '支付订单', '海关清关', '商家发货', '确认收货'];
                            } else {
                                this.displList = ['创建订单', '支付订单', '商家发货', '确认收货'];
                            }
                            this.act = 2;
                            break;
                        case 5:
                            if (this.orderDetails.goods[0].trade_type_name == '保税') {
                                this.displList = ['创建订单', '支付订单', '海关清关', '商家发货', '确认收货'];
                                this.act = 4;
                            } else {
                                this.displList = ['创建订单', '支付订单', '商家发货', '确认收货'];
                                this.act = 3;
                            }
                            break;
                        case 0:
                            if (this.orderDetails.goods[0].trade_type_name == '保税') {
                                this.displList = ['创建订单', '支付订单', '海关清关', '商家发货', '确认收货'];
                                this.act = 1;
                            } else {
                                this.displList = ['创建订单', '支付订单', '商家发货', '确认收货'];
                                this.act = 1;
                            }
                            break;
                        case 6:
                        case 7:
                            if (this.orderDetails.goods[0].trade_type_name == '保税') {
                                this.displList = ['创建订单', '支付订单', '海关清关', '商家发货', '确认收货'];
                                this.act = 5;
                            } else {
                                this.displList = ['创建订单', '支付订单', '商家发货', '确认收货'];
                                this.act = 4;
                            }
                            break;
                        case -1:
                        case -2:
                        case -3:
                        case -4:
                        case -5:
                        case -6:
                        case -7:
                            this.displList = ['创建订单', '支付订单', "售后"];
                            this.act = 2;
                            break;
                    }


                })
            },
            overflow() {
                this.show = !this.show;
            }
        }
    }
</script>

<style scoped lang="scss">
  .dip {
    height: auto !important;
  }

  .sho {
    height: 220px !important;
  }

  .orderDetails {
    .publicBoxTitle {
      position: relative;
      padding-left: 10px;

      &:first-child:before {
        content: '';
        width: 4px;
        height: 14px;
        background: #3A61CA;
        position: absolute;
        left: 1px;
        top: 3px;
      }
    }

    .allOrderBox {

      .nav {
        position: relative;
        width: 1020px;
        height: 100%;
        margin: 0 auto;
        padding-top: 16px;
        display: flex;

        .cneter {
          position: relative;
          width: 80%;
          left: 10%;
        }

        .line {
          width: 17%;
          height: 1px;
          margin-top: 11px;
        }

        .line_left {
          position: absolute;
          border-top: 2px solid rgba($color: #409eff, $alpha: 1);
        }

        .line_right {
          position: absolute;
          right: 0;
          border-top: 2px solid rgba($color: #c0c4cc, $alpha: 1);
        }
      }

    }

    .logistics {
      padding-top: 0;

      .logisticsTitle {
        height: 50px;
        border-bottom: 1px solid #EEEEEE;
        line-height: 50px;
        margin-bottom: 30px;

        > span {
          margin-right: 75px;
          color: rgba(0, 0, 0, 0.5);

          span {
            color: black;
          }
        }
      }

      .logisticsStatus {
        height: 200px;
        overflow: hidden;
        display: block;
        padding-left: 1px;
      }

      .logisticsBtn {
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
        margin-top: 10px;
        color: #3A61CA;
      }

    }

    .orderDetailed {
      padding-top: 10px;

      .detailTitle {
        margin-top: 20px;

        .detailLeft {
          margin-left: 30px;
        }
      }

      .info_sp {
        width: 100%;
        margin-top: 20px;

        .info_top {
          width: 100%;
          height: 40px;
          background: rgba($color: #385cc8, $alpha: 0.1);
          padding-left: 15px;
          display: flex;
          justify-content: space-around;
          text-align: left;
          box-sizing: border-box;

          table {
            width: 100%;
            height: 100%;

            .tableLeft {
              width: 30%;
            }
          }
        }

        .info_centent {
          padding-left: 15px;
          width: calc(100% - 2px);

          background: #ffffff;
          border-left: 1px solid #eeeeee;
          border-right: 1px solid #eeeeee;
          box-sizing: border-box;
          table {
            width: 100%;
            height: 100%;

            .tableLeft {
              width: 30%;
              height: 100%;

              .cnm {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;

                .tableLeftImg {
                  img {
                    width: 56px;
                    height: 56px;
                  }
                }

                .tableLeftName {
                  margin-left: 16px;

                  p {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    margin-top: 10px;
                    margin-bottom: 10px;
                  }
                }
              }

            }

            tr {
              td {
                .info_bottom {
                  width: calc(100% + 6px);
                  height: 50px;
                  padding-left: 15px;
                  margin-left: -18px;
                  // line-height: 50px;
                  background: rgba($color: #385cc8, $alpha: 0.05);
                  display: flex;
                  justify-content: space-between;
                  align-content: center;
                  align-items: center;

                  input {
                    width: 550px;
                    height: 30px;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                    border-radius: 5px;
                  }

                  .bottom_rig {
                    text-align: right;
                    padding-right: 20px;
                    box-sizing: border-box;
                    .total {
                      margin-left: 35px;
                      margin-right: 20px;
                      color: rgba(#E93030, 0.7);

                    }
                  }
                }
              }
            }
          }

        }


      }
      .bottom{
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        background: rgba(56, 92, 200, 0.05);
        padding-right: 40px;
        box-sizing: border-box;
        div{
          &:first-child{
            margin-top: 10px;
          }
          margin-bottom: 10px;
        }
      }
    }

  }

  .guding {
    width: 10%;

    .statusBtn {
      display: block;
      margin-bottom: 5px;
      color: #409EFF;
      cursor: pointer;
      width: 64px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 6px;
    }

    .cancal {
      background: #FFFFFF;
      border: 1px solid #EEEEEE;
      color: #333333;
    }

    .cancal:hover {
      background: #EEEEEE;
      border: 1px solid #D2D2D2;
    }

    .immediatePayment {
      color: #E93030;
      background: #FFFFFF;
      border: 1px solid #E93030;
    }

    .immediatePayment:hover {
      background: #E93030;
      color: #FFFFFF;
    }
  }

  .nowPlay {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .ddje{

      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #E93030;
    }
    .plasePay{
      span{
        font-size: 20px;
        color: red;
        &:first-child{
          font-size: 16px;
          color: red;
        }
      }
    }
    .qrCode {
      width: 150px;
      height: 150px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }

    }

    .clonse {
      width: 16px;
      height: 16px;

      position: absolute;
      top: -76px;
      right: -10px;
      cursor: pointer;
      background: url("../../assets/img/del.png") no-repeat;
    }
    .line {
      width: 80%;
      height: 1px;
      border-top: dashed #ACC0D8 1px;

    }

    div {
      margin-bottom: 20px;
    }
  }

  .tswz {
    position: absolute;
    top: 170px;
    text-align: center;
    width: 100%;
    margin-left: -25px;
    color: #409EFF;
  }
  /deep/ .el-dialog {
    min-width: 550px;
    border-radius: 20px;
    .pay {
      position: relative;
      width: 220px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      top: -27px;
      div{
        &:first-child:hover{
          color: #2CCE30;
        }
        &:last-child:hover{
          color: #3958ac;
        }
        img{
          width: 25px;
          height: 22px;
          margin-top: -5px;
        }
        span{
          margin-left: 5px;
        }
        .wxzf{
          color: #09BB07;
        }
        .yezf{
          color: #3958AC;
        }
      }
      .feng{

        height: 20px;
        background: #333333;
        border-right: solid #333333 2px;

      }
    }
  }
</style>
